<template>
	<view class="container">
		<cu-custom bgColor="bg-gray" isleft="true">
			<block slot="leftText">
				<view class="messageBox flex align-center" @click="pickshow = !pickshow">
					{{pickValue?pickValue:'全部消息'}}
					<view class="margin-left-xs">
						<u-icon name="arrow-down" color="#666" size="12"></u-icon>
					</view>	
				</view>
			</block>
		</cu-custom>
		<!-- 列表 -->
		<scroll-view>
			<view class="messageList">
				<view class="messageItem margin-bottom-xs"  v-for="(item, index) in goodsList"  :key="index">
					
					<view class="dateText">{{ item.date }}</view>
					<view class="ItemBox">
						<view class="weCtn" v-if="item.status == 0"></view>
						<view class="tit">
							{{ item.title }}
						</view>
						<view class="flex align-start justify-between margin-top">
							<view class="boxContent flex flex-direction">
								<view class="leftBox">{{ item.description }}</view>
								<view class="leftBox">备注:{{ item.remark }}</view>
							</view>	
							<view class="flex align-center">
								<view class="BoxBtn change" v-if="item.type == 1 && item.status == 0">
									拒绝
								</view>
								<view class="BoxBtn" v-if="item.type == 1 && item.status == 0">
									同意
								</view>
							</view>	
						</view>	
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>	
			
		</scroll-view>
		<cu-bar :current="2"></cu-bar> 
		<u-picker :show="pickshow" :columns="columns" @confirm="sureChange" @close="pickshow = !pickshow"></u-picker>

		<u-modal :show="ModelShow" showCancelButton="true" @confirm="requestApply" @cancel="changeMode" ref="uModal" content="确定当前操作吗？"></u-modal>
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				pickValue:"",
				pickshow: false,
				columns: [
					['全部消息', '审核', '系统', '已处理']
				],
				ModelShow:false,
				pageindex:1,
				goodsList:[],
				id:"",
				status:0,
				loadingType: 'more', //加载更多状态
			};
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadMore('refresh');
		},
		//加载更多
		onReachBottom(){
			console.log(1111)
			this.loadMore();
		},
		onShow() {
			if(!this.hasLogin){
				uni.navigateTo({
					url:'/pages/login/login2'
				})
				return
			}
			setTimeout(()=>{
				this.loadMore('refresh');
			},500)
		},
		computed: {
			...mapState(['hasLogin'])
		},			
		methods: {
			sureChange(e){
				this.pickValue = e.value[0]
				this.pickshow = !this.pickshow
			},
			// 弹窗
			ModalAgree(e,status) {
			    this.id = e;
				this.status =status
				this.changeMode()
			},
			changeMode(){
				this.ModelShow = !this.ModelShow
			},
			/**同意拒绝 */
			requestApply(msgId, status) {
			    uni.showLoading({
			        title: '提交中...'
			    });
			    this.$ComFunJS.ajax({
			    	method:"post",
			    	url: "/rest/api/message",
			    	data:{
			    		msgId: this.id,
			    		status: this.status
			    	},
			    	success:(res)=>{
							
			    	}
			    })
			},
			navTo(url) {
				if(!this.hasLogin){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					uni.navigateTo({
						url: url
					})					
				}
			},
			//消息列表
			loadMore(type='add',loading) {
				let _this = this;
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				if(type === 'refresh'){
					this.pageindex = 1;
				}
				this.$ComFunJS.ajax({
					method:"get",
					url: "/rest/api/message",
					data:{
						page:_this.pageindex,
					},
					success:(res)=>{
						let goodsList = res.data
						if(type === 'refresh'){
							this.goodsList = [];
						}
						if(goodsList.length>0){
							_this.pageindex++
						}		
						this.goodsList = this.goodsList.concat(goodsList);
						//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
						this.loadingType  = res.data.length &&res.data.length >=10 ? 'more' : 'nomore';
						if(type === 'refresh'){
							if(loading == 1){
								uni.hideLoading()
							}else{
								uni.stopPullDownRefresh();
							}
						}							
					}
				})
			},
		},
	}
</script>
<style lang="scss">
.messageBox{
	padding: 10upx 28upx;
	background: #fff;
	font-size: 28upx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	border-radius: 32upx;
	color: #666666;
}
.messageList{
	padding: 0 32upx;
	padding-bottom: 100upx;
	.messageItem{

		.dateText{
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			display: flex;
			justify-content: center;
			margin-bottom: 20upx;
		}
		.ItemBox{
			padding: 24upx 32upx;
			background: #FFFFFF;
			border-radius: 40upx;
			position: relative;
			.weCtn{
				width: 24upx;
				height: 24upx;
				background: #FF0000;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: -6upx;
			}
			.tit{
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.boxContent{
				width: 60%;
				.leftBox{
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
			.BoxBtn{
				width: 104upx;
				height: 60upx;
				background: #1A75FF;
				border-radius: 30upx;
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				&.change{
					border: 2upx solid #1A75FF;
					box-sizing: border-box;
					background: none;
					color: #1A75FF;
				}
			}
		}
	}
}
</style>
